import { createRouter, createWebHashHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import Home from '@/views/home/index.vue'
import Sort from '@/views/sort/index.vue'
import Cart from '@/views/cart/index.vue'
import My from '@/views/my/index.vue'
import Login from '@/views/login/index.vue'
import FooterCom from '@/components/FooterCom.vue'




//定义路由规则
const routes = [
  {
    path: '/',
    // redirect 路由重定向
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    // component: Home
    //命名路由
    components: {
      default: Home,
      FooterCom: FooterCom
    },
    meta:{
      title:'首页'
    }
  },
  {
    path: '/sort',
    name: 'sort',
    // component: Sort
    components: {
      default: Sort,
      FooterCom: FooterCom
    },
    meta:{
      title:'分类'
    }
  },
  {
    path: '/cart',
    name: 'cart',
    // component: Cart
    components: {
      default: Cart,
      FooterCom: FooterCom
    },
    meta:{
      title:'购物车'
    }
  },
  {
    path: '/my',
    name: 'my',
    // component: My
    components: {
      default: My,
      FooterCom: FooterCom
    },
    meta:{
      title:'我的'
    }
  },
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // component: () => import('../views/login/index.vue')
    component: Login,
    meta: {
      hidden: true,
      title:'登录'
    }

  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register/index.vue'),
    meta: {
      hidden: true,
      title:'注册'
    },
    redirect: '/register/step1',
    children: [
      {
        path: 'step1',
        name: 'step1',

        component: () => import('../views/register/step1.vue'),
      },
      {
        path: 'step2',
        name: 'step2',
        component: () => import('../views/register/step2.vue'),
      },
      {
        path: 'step3',
        name: 'step3',
        component: () => import('../views/register/step3.vue'),
      },
    ]

  },
  {
    path: '/address',
    name: 'address',
    component: () => import('../views/address/index.vue'),
    meta: {
      hidden: true,
      title:'地址'
    },
    redirect: '/address/step1',
    children: [
      {
        path: 'qstep1',
        name: 'address-step1',
        component: () => import('../views/address/step1.vue'),
      },
      {
        path: 'step2',
        name: 'address-step2',
        component: () => import('../views/address/step2.vue'),
      },
    ]

  },
  {
    path: '/detail/:proid',
    name: 'detail',
    component: () => import('../views/detail/index.vue'),
    meta: {
      hidden: true,
      
    }
  },
  {
    path: '/douyu',
    name: 'douyu',
    component: () => import('../views/douyu/index.vue'),
    meta: {
      hidden: true,
      title:'斗鱼接口跨域练习'
    }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/error/404.vue'),
    meta: {
      hidden: true,
      title:'404'
    },
    //路由独享守卫
    beforeEnter: (to:any, from:any) => {
      console.log(to,from);
      return false
    }
  },

]
//创建路由对象
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

//所谓的全局指的是所有页面跳转都会执行的
/*
路由守卫
1.全局守卫
  1.全局前置守卫--  跳转之前后的方法
  2.全局解析守卫--  跳转过程中的方法
  3.全局后置守卫--  跳转完成后的方法
2.路由的独享守卫

3.组件守卫
 */
/*
路由守卫：
  1. 全局守卫
    * beforeEach: 全局的前置守卫，可以做路由鉴权(路由的权限验证)，该守卫会在跳转之前执行(组件没加载的时候调用)
    beforeResolve: 全局的解析守卫，和 beforeEach 类似，区别是调用的时机不同(组件已经在加载了)
    * afterEach: 全局的后置守卫，跳转到页面路由之后执行的函数
   
  2. 独享守卫
    beforeEnter: 独享守卫，只有当前路由跳转才会被执行

  3. 组件内的守卫
    选项式API：
    beforeRouteEnter(to, from) {
      // 在渲染该组件的对应路由被验证前调用
      // 不能获取组件实例 `this` ！
      // 因为当守卫执行时，组件实例还没被创建！
    },
    beforeRouteUpdate(to, from) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
      // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from) {
      // 在导航离开渲染该组件的对应路由时调用
      // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    },


    组合式API：
    onBeforeRouteUpdate： 监听路由变化 
    onBeforeRouteLeave : 监听路由离开

*/

//路由全局前置守卫
router.beforeEach((to, from, next) => {
  /* to 我们要去的页面信息
  fullPath: "/home"
  hash: ""
  href: "#/home"
  matched: [{…}]
  meta: {}
  name: "home"
  params: {}
  path: "/home"
  query: {}
  redirectedFrom: undefined
  [[Prototype]]: Object
  from 当前的页面信息 */
  console.log(2343, to, from);
  // if(to.name=='user'){
  //   if(localStorage.getItem('isLogin')!='true'){
  //     next('/login')
  //   }
  // }
  if (to.name == 'my') {
    if (localStorage.getItem('isLogin') != 'true') {
      next('/login')
    } else {
      next()//直接放行
    }
  } else {
    //不是我的页面，直接放行
    next()
  }
  return false
})

//路由全局解析守卫
router.beforeResolve(async to=>{

})

//路由全局后置守卫
router.afterEach((to,from)=>{
  document.title=String(to.meta.title)
}) 
export default router
